<template>
  <div style="width: 100%;">
    <el-row style="margin: 10px 20px 10px 10px;" >
      <el-switch v-model="switchvalue" :active-text="textall" :inactive-text="textclid" @change="change_switchvalue" v-show="showswitch==true"></el-switch>

      <el-switch v-model="switchvalue2" active-text="按年、月查询" inactive-text="按年查询" @change="change_switchvalue2"></el-switch>

      <el-date-picker v-model="year" type="year" placeholder="选择年" @change="changeyear" value-format="yyyy" v-if="true==true"></el-date-picker>

      <el-select v-model="month" placeholder="请选择" v-if="switchvalue2==true" style="margin-left: 30px;"  @change="changemonth">
          <el-option v-for="item in 12" :key="item" :label="item+'月'" :value="item"></el-option>
      </el-select>
      <el-button    @click="Getdata"  style="margin-left:50px">查询</el-button>
    </el-row>
    <div class="main">
      <div id="bingtu" style="width:100%; height:400px;">
        <div id="bingtu" style="width:100%; float: left;">
          <ve-histogram :data="chartData" :extend="extend"></ve-histogram>
        </div>
      </div>
      <div id="main" style="width:100%; height:400px;">
        <div id="bingtu" style="width:50%; float: left;">
          <ve-pie :data="chartData2"></ve-pie>
        </div>
        <div id="bingtu" style="width:50%; float: left;">
          <ve-pie :data="chartData3"></ve-pie>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {mapActions} from 'vuex';
  export default {
    name: "sjtjbayrj",
    data() {
      return {
       
        
        switchvalue2:false,


        switchvalue:true,
        showswitch:false,
        textall:'全局党委',
        textclid:'下级党委',
         extend : {'xAxis.0.axisLabel.rotate': 35},
        chartData: {
          columns: ['单位名', '捐钱数'],
          columnindex:[0,1,2],
          rows: []
        },
        chartData2: {
          columns: ['性别', '数量'],
          rows: []
        },
        chartData3: {
          columns: ['在职状态', '数量'],
          rows: []
        },


        childs:[],
        PostThis:{},
        datas:[],


        year:'2018',
        month:'1',

        dwdzb:0,

      };
    },
    mounted() {
      if(this.$store.state.Dw_DzbID.dwid==-1){
        this.showswitch=true;this.textall='全局党委';this.textclid='下级党委'
      }
      else if(this.$store.state.Dw_DzbID.dzbid==-1){
        this.showswitch=true;this.textall='院及党委';this.textclid='下级党支部'
      }
      else{
        this.showswitch=false;
      }
      this.year=(new Date()).getFullYear()+''
      this.GetZbByIdFunc();
    },
    methods: {
      ...mapActions([ 'GetZbById','GetBAYRJs']),
      GetZbByIdFunc() {
        let _this = this;
        this.GetZbById()
        .then((e) =>{
          if (typeof e === "object") {
            if(Array.isArray(e.childs)){
              this.childs = e.childs;
              this.PostThis = e.PostThis;
            }
          }
        });
      },
      change_switchvalue(){
        this.Getdata();
      },
      change_switchvalue2(){
        this.Getdata();
      },
      changeyear(){
        this.Getdata();
      },
      changemonth(){
        this.Getdata();
      },
      Getdata() {
        this.chartData.rows=[];
        this.chartData2.rows=[];  
        this.chartData3.rows=[];
        this.datas=[];
        let month=-1;
        if(this.switchvalue2==true){
          month=this.month
        }
        if(this.showswitch==true){
          
          if(this.switchvalue==true){  //只获取该党委的数据
            this.GetBAYRJs({
              year:this.year,
              month:month,
              element:this.PostThis,
            })
            .then((e) =>{
              this.datas.push(e)
            });
          }
          else{  //获取下级党支部的数据
            if(Array.isArray(this.childs)){
              let ps=[];
              for (let index = 0; index < this.childs.length; index++) {
                const element = this.childs[index];
                ps.push(this.GetBAYRJs({
                  year:this.year,
                  month:month,
                  dwid:element.dwid,
                  dzbid:element.dzbid,
                  element:element,
                }))
              }
              Promise.all(ps)
              .then((e) =>{
                this.datas=e;
              });
            }
            console.log(this.childs);
          }
        }
        else  //获取当前党支部的数据
        {
          this.GetBAYRJs({
            year:this.year,
            month:month,
            element:this.PostThis,
          })
          .then((e) =>{
            this.datas.push(e)
          });
        }
      },
      dodetails(){
        if(this.datas.length>0){
          for (let index = 0; index < this.datas.length; index++) {
            const element = this.datas[index];
            if(element.element.dwid==-1){ //局
              let row={};
              row[this.chartData.columns[0]]=element.element.alias;
              if(element.dfeis.length==0){
                row[this.chartData.columns[1]]=0; 
              }
              else{
                row[this.chartData.columns[1]]=element.dfeis[0].money; 
              }
              this.chartData.rows.push(row);
            }
            else if(element.element.dzbid==-1){ //院
              let row={};
              row[this.chartData.columns[0]]=element.element.alias;
              if(element.dfeis.length==0){
                row[this.chartData.columns[1]]=0; 
              }
              else{
                row[this.chartData.columns[1]]=element.dfeis[element.dfeis.length-1].money; 
              }
              this.chartData.rows.push(row);
            }
            else if(element.element.dzbid>0){ //党支部
              let row={};
              row[this.chartData.columns[0]]=element.element.alias;
              if(element.dfeis.length==0){
                row[this.chartData.columns[1]]=0; 
              }
              else{
                row[this.chartData.columns[1]]=element.dfeis[element.dfeis.length-1].money; 
              }
              this.chartData.rows.push(row);
            }
            else{
              if(element.dfeis.length==0){
                let row={};
                row[this.chartData.columns[0]]='无';
                row[this.chartData.columns[1]]=0; 
                this.chartData.rows.push(row);
              }
              else{
                for (let index2 = 0; index2 < element.dfeis.length-1; index2++) {
                  const element2 = element.dfeis[index2];
                  let row={};
                  row[this.chartData.columns[0]]=element2.name;
                  row[this.chartData.columns[1]]=element2.money; 
                  this.chartData.rows.push(row);
                }
              }
              
            }
              
              
              
           
           

//             alias: "测绘地理信息局委员会"
// createtime: "2018"
// dwid: -1
// dzbid: -1
// name: "中共内蒙古自治区测绘地理信息局委员会"
// type: ""
//             dfeis: Array(1)
// element: Object



//             if(element.dfs.length==0){
//               let row={};
//               row[this.chartData.columns[0]]=element.name;
//               row[this.chartData.columns[1]]=0;
//               row[this.chartData.columns[2]]=0;
//               this.chartData.rows.push(row);
//             }
//             else
//             {
              
//             }
            
            
          }
          // this.chartData2.rows.push({
          //   '性别':'男性党员',
          //   '数量':dymanperson
          // });
          // this.chartData2.rows.push({
          //   '性别':'女性党员',
          //   '数量':dywomanperson
          // });
          // //
          // this.chartData3.rows.push({
          //   '在职状态':'在职',
          //   '数量':dyzzperson
          // });
          // this.chartData3.rows.push({
          //   '在职状态':'离退休',
          //   '数量':dytxperson
          // });
        }
      }
    },
    watch: {
      "datas":{
        handler(newValue, oldValue){
          this.dodetails();
        },
        deep:true
      }
    },
  };
</script>
<style scoped>
  * {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .info {
    width: 99%;

    height: 300px;

    border-radius: 5px;
  }

  .condition {
    width: 100%;
    height: 30px;
    font-size: 16px;
    font-weight: bold;
    background-color: #c54343;
    line-height: 30px;
    color: #ffffff;
  }

  .span_Introduction {
    margin-top: 10px;
  }

  .main {
    width: calc(100% - 230px);
    height: auto;
    float: left;
    border: 0px solid #c54343;
  }
</style>